<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>功能实现</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- JQuery操作动画
		    show()         功能：显示效果    本质：display:block
			hide()         功能：隐藏效果    本质：display:none
			
			sideDown()     功能：向下（滑动式）效果
			slideUP()      功能：向上（滑动式）效果
			
			fadeIn(毫秒数)  功能：淡入  本质：显示+透明度0~1
			fadeOut(毫秒数)  功能：淡出  本质：隐藏+透明度1~0
		 -->
	<style>
		div{
			width: 500px;
			height: 500px;
			background: #ff0;
			}
	</style>
	</head>
	<body>
		<button id="showbtn">显示按钮</button>
		<button id="hidebtn">隐藏按钮</button>
		<button id="sd">滑动式向下按钮</button>
		<button id="su">滑动式向上按钮</button>
		<button id="fi">淡入按钮</button>
		<button id="fo">淡出按钮</button>
		<div></div>
		<script>
			/* JQ动画：显示与隐藏 */
			$('#fo').click(function(){
				//隐藏  css属性直接给元素设定
				$('div').fadeOut(600);
			});
			
			$('#fi').click(function(){
				//隐藏  css属性直接给元素设定
				$('div').fadeIn(600);
			});
			
			$('#su').click(function(){
				//隐藏  css属性直接给元素设定
				$('div').slideUp();
			});
			
			$('#sd').click(function(){
				//隐藏  css属性直接给元素设定
				$('div').slideDown();
			});
			
			$('#hidebtn').click(function(){
				//隐藏  css属性直接给元素设定
				$('div').hide();
			});
			
			$('#showbtn').click(function(){
				//隐藏  css属性直接给元素设定
				$('div').show();
			});
			
			/* $('button').click(function(){
				//隐藏  css属性直接给元素设定
				$('div').css('display','block').css("border-radius","50%").css("background","red");
			}); */
		</script>
	</body>
</html>